// Name:                      Table
//
// Description:               Define style for table
//
// Component:                `.am-table`
//
// Modifiers:                `.am-table-bordered`
//                           `.am-table-radius`
//                           `.am-table-striped`
//                           `.am-table-hover`
//
// =============================================================================
// Table mixin
// =============================================================================
.table-row-variant(@state; @background; @border) {
    // Exact selectors below required to override `.table-striped` and prevent
    // inheritance to nested tables.
    .table>thead>tr, .table>tbody>tr, .table>tfoot>tr {
        >td.@{state}, >th.@{state}, &.@{state}>td, &.@{state}>th {
            background-color: @background;
            border-color: @border;
        }
    }
    // Hover states for `.table-hover`
    // Note: this is not available for cells or rows within `thead` or `tfoot`.
    .@{ns}table-hover>tbody>tr {
        >td.@{state}:hover, >th.@{state}:hover, &.@{state}:hover>td, &.@{state}:hover>th {
            background-color: darken(@background, 5%);
            border-color: darken(@border, 5%);
        }
    }
}

.table-state-variant(@state; @bg; @color) when (@color ='') {
    >td.@{ns}@{state}, >th.@{ns}@{state}, &.@{ns}@{state}>td, &.@{ns}@{state}>th {
        background-color: @bg;
    }
}

.table-state-variant(@state; @bg; @color) when (@bg ='') {
    >td.@{ns}@{state}, >th.@{ns}@{state}, &.@{ns}@{state}>td, &.@{ns}@{state}>th {
        color: @color;
    }
}

.table-state-variant(@state; @bg; @color) when not (@bg ='') and not (@color ='') {
    >td.@{ns}@{state}, >th.@{ns}@{state}, &.@{ns}@{state}>td, &.@{ns}@{state}>th {
        color: @color;
        background-color: @bg;
    }
}


/* ==========================================================================
   Component: Table
 ============================================================================ */

table {
    max-width: 100%;
    background-color: @table-bg;
    empty-cells: show;
    code {
        white-space: normal;
    }
}

th {
    text-align: left;
}

.@{ns}table {
    width: 100%;
    margin-bottom: @global-margin;
    border-spacing: 0;
    border-collapse: separate;
    .hook-table;
    >thead, >tbody, >tfoot {
        >tr {
            >th, >td {
                padding: @table-cell-padding;
                line-height: @table-line-height;
                vertical-align: top;
                border-top: 1px solid @table-border-color;
            }
        }
    }
    // Bottom align for headings
    >thead>tr>th {
        vertical-align: bottom;
        // fix by me
        // border-bottom: 1px solid @table-border-color;
    }
    // Remove top border from thead
    >caption+thead, >colgroup+thead, >thead:first-child {
        >tr:first-child {
            >th, >td {
                border-top: 0;
            }
        }
    }
    // multiple tbody
    >tbody+tbody {
        tr:first-child {
            td {
                border-top: 2px solid @table-border-color;
            }
        }
    }
}


/* Bordered version */

.@{ns}table-bordered {
    border: 1px solid @table-border-color;
    border-left: none;
    .hook-table-bordered;
    >thead, >tbody, >tfoot {
        >tr {
            >th, >td {
                border-left: 1px solid @table-border-color;
                // 避免有 rowspan 的时候后面的行没有左边框
                /*&:first-child {
          border-left: none;
        }*/
            }
        }
    }
    // fixes #566
    >tbody>tr:first-child {
        >th, >td {
            border-top: none;
        }
    }
    >thead {
        &+tbody {
            >tr:first-child {
                >th, >td {
                    border-top: 1px solid @table-border-color;
                }
            }
        }
    }
}


/* Border-radius version */

.@{ns}table-radius {
    border: 1px solid @table-border-color;
    // box-shadow: 0 0 1px @gray-light;
    border-radius: @radius-normal;
    .hook-table-radius;
    >thead {
        >tr:first-child {
            >th:first-child, >td:first-child {
                border-top-left-radius: @radius-normal;
                border-left: none;
            }
            >th:last-child, >td:last-child {
                border-top-right-radius: @radius-normal;
                border-right: none;
            }
        }
    }
    >tbody {
        >tr {
            >th:first-child, >td:first-child {
                border-left: none;
            }
            >th:last-child, >td:last-child {
                border-right: none;
            }
        }
        >tr:last-child {
            >th, >td {
                border-bottom: none;
            }
            >th:first-child, >td:first-child {
                border-bottom-left-radius: @radius-normal;
            }
            >th:last-child, >td:last-child {
                border-bottom-right-radius: @radius-normal;
            }
        }
    }
}


/* Zebra-striping */

.@{ns}table-striped>tbody>tr:nth-child(odd) {
    >td, >th {
        background-color: @table-bg-striped;
        .hook-table-striped;
    }
}


/* Hover effect */

.@{ns}table-hover>tbody>tr:hover {
    >td, >th {
        background-color: @table-bg-hover;
        .hook-table-hover;
    }
}

// Modifiers: compact
// =============================================================================
.@{ns}table-compact {
    >thead, >tbody, >tfoot {
        >tr {
            >th, >td {
                padding: @table-cell-padding-compact;
            }
        }
    }
}

// Modifiers: centered
// =============================================================================
.@{ns}table-centered {
    >thead, >tbody, >tfoot {
        >tr {
            >th, >td {
                text-align: center;
            }
        }
    }
}

// Modifiers: states
// =============================================================================
.@{ns}table>thead>tr, .@{ns}table>tbody>tr, .@{ns}table>tfoot>tr {
    .table-state-variant(active, @table-bg-active, '');
    .table-state-variant(disabled; ''; @gray-light);
    .table-state-variant(primary; @table-primary-bg; @table-primary-color);
    .table-state-variant(success; @table-success-bg; @table-success-color);
    .table-state-variant(warning; @table-warning-bg; @table-warning-color);
    .table-state-variant(danger; @table-danger-bg; @table-danger-color);
}

// Hooks
// =============================================================================
.hook-table() {}

.hook-table-bordered() {}

.hook-table-radius() {}

.hook-table-striped() {}

.hook-table-hover() {}
